<template>
<view class="coupon-item flexr align-center">
	<image v-if="state == 'used'" class="used-icon" src="@/static/used.png"></image>
	<view class="value text-color-primary flexc align-center"
		:class="{
			'used': state == 'used'
		}"
	>
		<view>
			<text class="money">30</text>
			<text class="unit">元</text>
		</view>
		<text class="type">抵扣券</text>
	</view>
	<view class="condition"
		:class="{
			'used': state == 'used'
		}"
	>
		<view>满200减30</view>
		<view class="expiration">
			2024/07/22 23:59过期
		</view>
	</view>
	<view v-if="state == 'useable'" class="primary-button" @click="goDetail">
		使用
	</view>
	<view v-else-if="state == 'giveable'" class="primary-button" @click="goGive">
		赠送
	</view>
	<view class="vertical-divier flexc align-center">
		<view class="circle"></view>
		<view class="vdivider flex-1"></view>
		<view class="circle"></view>
	</view>
</view>
</template>

<script setup>
defineProps({
	state: String,
})
function goDetail() {
	uni.navigateTo({
		url: `/pages/my/couponDetail?title=满200减30`
	})
}
function goGive() {
	uni.navigateTo({
		url: `/pages/my/giveCoupon`
	})
}
</script>

<style lang="scss">
.coupon-item {
	height: 160rpx;
	min-height: 160rpx;
	background-color: white;
	border-radius: 15rpx;
	position: relative;
	margin-bottom: 16rpx;
	.used-icon {
		width: 96rpx;
		height: 96rpx;
		top: 0;
		right: 0;
		position: absolute;
	}
	.value {
		width: 172rpx;
		.money {
			font-size: 40rpx;
		}
		.unit, .type {
			font-size: 20rpx;
		}
		&.used {
			color: $text-color5 !important;
		}
	}
	.condition {
		flex: 1;
		margin-left: 32rpx;
		.expiration {
			color: $text-color5;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
		&.used {
			color: $text-color5;
		}
	}
	.primary-button {
		width: 112rpx;
		height: 56rpx;
		font-size: 24rpx;
		margin-right: 32rpx;
	}
	.vertical-divier {
		position: absolute;
		left: 160rpx;
		bottom: -12rpx;
		top: -12rpx;
		// height: 100%;
		.circle {
			width: 24rpx;
			height: 24rpx;
			background-color: $bg-content;
			border-radius: 12rpx;
		}
		.vdivider {
			width: 1px;
			border-left: 1px dashed #E5E5E5;
		}
	}
}
</style>